import React, { useEffect, useState } from 'react';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Avatar, Button, Card, Col, Layout, Menu, Row, Statistic, Typography, message } from 'antd';
import {
  UserOutlined,
  DashboardOutlined,
  SettingOutlined,
  LogoutOutlined,
  TeamOutlined,
  FileTextOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
import { getUser, removeToken, removeUser } from '@/utils/auth';

const { Header, Sider, Content } = Layout;
const { Title, Text } = Typography;

/**
 * 仪表盘页面
 */
const Dashboard: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    try {
      const userData = getUser();
      if (!userData) {
        message.error('用户未登录');
        history.push('/');
        return;
      }
      setUser(userData);
    } catch (error) {
      message.error('获取用户信息失败');
      history.push('/');
    }
  }, []);

  // 处理登出
  const handleLogout = () => {
    removeToken();
    removeUser();
    message.success('登出成功');
    history.push('/');
  };
  
  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-lg">加载中...</p>
      </div>
    );
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        theme="light"
        style={{
          boxShadow: '2px 0 8px 0 rgba(29,35,41,.05)',
        }}
      >
        <div className="h-[64px] flex items-center justify-center">
          <Title level={4} style={{ margin: 0 }}>
            {collapsed ? 'WAI' : 'We AI 系统'}
          </Title>
        </div>
        <Menu
          mode="inline"
          defaultSelectedKeys={['dashboard']}
          style={{ borderRight: 0 }}
          items={[
            {
              key: 'dashboard',
              icon: <DashboardOutlined />,
              label: '仪表盘',
            },
            {
              key: 'users',
              icon: <TeamOutlined />,
              label: '用户管理',
            },
            {
              key: 'reports',
              icon: <FileTextOutlined />,
              label: '报表',
            },
            {
              key: 'settings',
              icon: <SettingOutlined />,
              label: '系统设置',
            },
          ]}
        />
      </Sider>
      
      <Layout>
        <Header style={{ 
          background: '#fff', 
          padding: '0 24px', 
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
          />
          
          <div className="flex items-center">
            <Text style={{ marginRight: 12 }}>
              欢迎您, {user.chineseName || user.englishName}
            </Text>
            <Avatar
              style={{ backgroundColor: '#1677ff' }}
              icon={<UserOutlined />}
            />
            <Button
              type="text"
              icon={<LogoutOutlined />}
              onClick={handleLogout}
              style={{ marginLeft: 8 }}
            >
              登出
            </Button>
          </div>
        </Header>
        
        <Content style={{ margin: '24px 16px', padding: 24, background: '#f5f5f5', minHeight: 280 }}>
          <PageContainer
            header={{
              title: '仪表盘',
              subTitle: '欢迎使用We AI系统仪表盘',
            }}
          >
            <Row gutter={[24, 24]}>
              <Col xs={24} sm={12} md={12} lg={6}>
                <ProCard>
                  <Statistic title="用户总数" value={42} />
                </ProCard>
              </Col>
              <Col xs={24} sm={12} md={12} lg={6}>
                <ProCard>
                  <Statistic title="在线用户" value={8} />
                </ProCard>
              </Col>
              <Col xs={24} sm={12} md={12} lg={6}>
                <ProCard>
                  <Statistic title="今日登录" value={15} />
                </ProCard>
              </Col>
              <Col xs={24} sm={12} md={12} lg={6}>
                <ProCard>
                  <Statistic title="系统状态" value="正常" />
                </ProCard>
              </Col>
            </Row>
            
            <ProCard title="系统信息" style={{ marginTop: 24 }}>
              <Row gutter={[16, 16]}>
                <Col span={24}>
                  <Card title="版本信息">
                    <p>当前版本: v1.0.0</p>
                    <p>上次更新: 2023-12-01</p>
                  </Card>
                </Col>
              </Row>
            </ProCard>
          </PageContainer>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Dashboard; 